<script lang="ts" setup>
import {computed} from 'vue'
import LoginForm from './LoginForm.vue'
import ForgetPasswordForm from './ForgetPasswordForm.vue'
import RegisterForm from './RegisterForm.vue'
import MobileForm from './MobileForm.vue'
import QrCodeForm from './QrCodeForm.vue'
import {storeToRefs} from 'pinia';
import {useThemeConfig} from '/@/stores/themeConfig';

defineProps({
  sessionTimeout: {
    type: Boolean,
  },
})
// 定义变量内容
const storesThemeConfig = useThemeConfig();
const {themeConfig} = storeToRefs(storesThemeConfig);
// 现在不需要关于切换登录方式的state了

// 获取布局配置信息
const getThemeConfig = computed(() => {
  return themeConfig.value;
});
// const globSetting = useGlobSetting()
// const { prefixCls } = useDesign('login')
// const localeStore = useLocaleStore()
// const showLocale = localeStore.getShowPicker
// const title = computed(() => globSetting?.title ?? '')
</script>

<template>
  <div class="relative h-full min-h-full w-full overflow-hidden px-4">
    <div class="absolute right-4 top-4 flex items-center">
      <AppDarkModeToggle v-if="!sessionTimeout" class="enter-x mr-2"/>
      <AppLocalePicker v-if="!sessionTimeout" class="enter-x xl:text-gray-600" :show-text="false"/>
    </div>

    <span class="-enter-x xl:hidden">
      <AppLogo :always-show-title="true"/>
    </span>

    <div class="relative mx-auto h-full py-2 container sm:px-10">
      <div class="h-full flex">
        <div class="mr-4 hidden min-h-full pl-4 xl:w-6/12 xl:flex xl:flex-col">
          <AppLogo class="-enter-x"/>
          <div class="my-auto">
            <img :alt="getThemeConfig.globalTitle" src="@/assets/svg/login-box-bg.svg" class="-enter-x w-1/2 -mt-16">
            <div class="-enter-x mt-10 font-medium text-white">
              <span class="mt-4 inline-block text-3xl"> {{ getThemeConfig.globalTitle }}</span>
            </div>
            <div class="-enter-x mt-5 font-normal text-white dark:text-gray-500">
              {{ "测试" }}
            </div>
          </div>
        </div>
        <div class="h-full w-full flex py-5 xl:my-0 xl:h-auto xl:w-6/12 xl:py-0">
          <!-- eslint-disable max-len -->
          <!--              :class="`${prefixCls}-form`"-->

          <div
              class="enter-x relative mx-auto my-auto w-full rounded-md px-5 py-8 shadow-md xl:ml-16 lg:w-2/4 sm:w-3/4 xl:w-auto xl:bg-transparent xl:p-4 sm:px-8 xl:shadow-none"
          >
            <LoginForm/>
            <ForgetPasswordForm/>
            <RegisterForm/>
            <MobileForm/>
            <QrCodeForm/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less">
@prefix-cls: ~'@{namespace}-login';
@logo-prefix-cls: ~'@{namespace}-app-logo';
@countdown-prefix-cls: ~'@{namespace}-countdown-input';
@dark-bg: #293146;

html[data-theme='dark'] {
  .@ {
    prefix-cls
  }

{
  background-color: @dark-bg;

  &::before {
    background-image: url('@/assets/svg/login-bg-dark.svg');
  }

  .ant-input,
  .ant-input-password {
    background-color: #232a3b;
  }

  .ant-btn:not(.ant-btn-link, .ant-btn-primary) {
    border: 1px solid #4a5569;
  }

  &-form {
    background: transparent !important;
  }

  .app-iconify {
    color: #fff;
  }
}

  input.fix-auto-fill,
  .fix-auto-fill input {
    -webkit-text-fill-color: #c9d1d9 !important;
    box-shadow: inherit !important;
  }
}

.@ {
  prefix-cls
}

{
@media (max-width: @screen-xl) {
  background-color: #293146;

  .@ {
    prefix-cls
  }

  -form {
    background-color: #fff;
  }
}

&::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-left: -48%;
  content: '';
  background-image: url('@/assets/svg/login-bg.svg');
  background-repeat: no-repeat;
  background-position: 100%;
  background-size: auto 100%;

  @media (max-width: @screen-xl) {
    display: none;
  }
}

.@ {
  logo-prefix-cls
}

{
  position: absolute
;
  top: 12px
;
  height: 30px
;

&__title {
  font-size: 16px;
  color: #fff;
}

img {
  width: 32px;
}

}

.container {
  .@ {
    logo-prefix-cls
  }

{
  display: flex;
  width: 60%;
  height: 80px;

  &__title {
    font-size: 24px;
    color: #fff;
  }

  img {
    width: 48px;
  }
}
}

&-sign-in-way {
  .anticon {
    font-size: 22px;
    color: #888;
    cursor: pointer;
  }
}

input:not([type='checkbox']) {
  min-width: 360px;

  @media (max-width: @screen-xl) {
    min-width: 320px;
  }

  @media (max-width: @screen-lg) {
    min-width: 260px;
  }

  @media (max-width: @screen-md) {
    min-width: 240px;
  }

  @media (max-width: @screen-sm) {
    min-width: 160px;
  }
}

.@ {
  countdown-prefix-cls
}

input {
  min-width: unset;
}

.ant-divider-inner-text {
  font-size: 12px;
}

}
</style>
